import React, { useState } from "react";
import { Input, Table, Button } from "antd";

import type { GetProps, TableProps } from "antd";
import { current } from "@reduxjs/toolkit";

type SearchProps = GetProps<typeof Input.Search>;
interface DataType {
  key: string;
  name: string;
  age: number;
}

const { Search } = Input;

const Home: React.FC = () => {
  const columns: TableProps<DataType>["columns"] = [
    { dataIndex: "key", title: "#", align: "center", width: "80px" },
    { dataIndex: "name", title: "名称", align: "center", width: "" },
    { dataIndex: "age", title: "年龄", align: "center", width: "" },
    {
      dataIndex: "actions",
      title: "操作",
      align: "center",
      width: "300px",
      render: (_: any, record: any) => {
        return (
          <>
            <div
              style={{ display: "flex", gap: "10px", justifyContent: "center" }}
            >
              <Button type="primary" onClick={onEdit} size="small">
                编辑
              </Button>
              <Button type="primary" danger size="small">
                删除
              </Button>
            </div>
          </>
        );
      },
    },
  ];

  const data: DataType[] = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: (i + 1).toString(),
      name: "John Brown",
      age: 32,
    });
  }

  const onSearch: SearchProps["onSearch"] = (value: any, _e, info) => {
    const type = info?.source;
    setLoadingSearch(true);

    if (type == "input") {
      setTimeout(() => {
        setLoadingSearch(false);
      }, 2000);
    } else if (type == "clear") {
      setLoadingSearch(false);
    }
  };
  const [loadingSearch, setLoadingSearch] = useState(false);
  const [loadingTable, setLoadingTable] = useState(false);
  const onEdit = () => {
    setLoadingTable(true);
    setTimeout(() => {
      setLoadingTable(false);
    }, 2000);
  };
  return (
    <>
      <div style={{ marginBottom: "20px" }}>
        <Search
          placeholder="请输入"
          loading={loadingSearch}
          enterButton
          style={{ width: 200 }}
          onSearch={onSearch}
          allowClear
        />
      </div>
      <div>
        <Table
          columns={columns}
          dataSource={data}
          loading={loadingTable}
          bordered
        />
      </div>
    </>
  );
};
export default Home;
